// 旅游资源占比统计
var barEcharts = echarts.init(document.getElementById('barEcharts'));
var barEchartsOption = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        formatter: '{c}%',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            show : false,
            data : ['主类', '亚类', '基本类'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value',
            show : false
        }
    ],
    series : [
        {
            name:'占比',
            type:'bar',
            barWidth: 40,
            data:[100, 87, 52],
            itemStyle: {
                normal: {
                    barBorderRadius:[4, 4, 4, 4],
                    label : {
                        show: true, 
                        formatter: '{c}%',
                        textStyle: {
                            color: "#fff"
                        },
                        position: 'top'
                    },
                    color: function (params){
                        var colorList = ['#0b6b73','#499654','#4a87ca'];
                        return colorList[params.dataIndex];
                    }
                }
            }
        }
    ]
};  
// 使用刚指定的配置项和数据显示图表。
barEcharts.setOption(barEchartsOption);

// 旅游资源单体级别分布
var tingqubili = echarts.init(document.getElementById('pieEcharts'));
var optionTingqubili = {
    color: ['#4bb6fc', '#0069ad', '#003d64'],
    tooltip: {
        trigger: 'item',
        formatter: "{b}"
    },
    series: [
        {
            "center": [
                "50%",
                "50%"
            ],
            name: '级别分布',
            type: 'pie',
            radius: ['55', '60%'],
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    textStyle: {
                        fontSize: '11'
                    },
                    position: 'inside'
                },
                emphasis: {
                    show: true
                },
            },
            color: [{
                type: 'linear',
                colorStops: [{
                    offset: 0,
                    color: "#4a88c6" // 0% 处的颜色
                }, {
                    offset: 1,
                    color: "#499556" // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }, 'none'],
            labelLine: {
                normal: {
                    show: true
                }
            },
            data: [
                {value: 500, name: '25处四级旅游资源单体'},
                { value: 100, name: '7处五级旅游资源单体' , itemStyle: {
                    normal: {
                        color: "#0069ad"
                    },

                }}
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
tingqubili.setOption(optionTingqubili);